<template>
	<view class="content">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="weather-info">
				<text class="weather-text">晴 26°C</text>
			</view>
			<view class="park-name">智慧科技产业园</view>
			<view class="message-icon" @click="viewMessages">
				<text class="iconfont icon-message">📩</text>
				<view class="badge" v-if="unreadMessages > 0">{{ unreadMessages }}</view>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<swiper class="banner-swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item, index) in bannerList" :key="index" @click="viewBannerDetail(item)">
				<image class="banner-image" :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 游客模式提示条 -->
		<view class="guest-tip" v-if="userInfo && userInfo.userType === 'guest'">
			<text class="guest-tip-text">您正在使用游客模式，部分功能受限</text>
			<button class="guest-login-btn" @click="goToLogin">立即登录/注册</button>
		</view>
		
		<!-- 快捷功能区 -->
		<view class="quick-function">
			<view class="function-item" @click="navigateTo('visitor')">
				<image class="function-icon" src="/static/icons/访客管理.png"></image>
				<text class="function-text">访客预约</text>
			</view>
			<view class="service-item" @click="navigateTo('device')">
				<image class="service-icon" src="/static/icons/设备维修2.png"></image>
				<text class="service-text">设备维保</text>
			</view>
			<view class="function-item" @click="navigateTo('bill')">
				<image class="function-icon" src="/static/icons/缴费管理.png"></image>
				<text class="function-text">缴费管理</text>
			</view>
			<view class="function-item" @click="navigateTo('parking')">
				<image class="function-icon" src="/static/icons/停车管理.png"></image>
				<text class="function-text">停车管理</text>
			</view>
		</view>
		
		<!-- 园区公告 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">园区公告</text>
				<text class="section-more" @click="viewMore('notice')">更多 ></text>
			</view>
			<view class="notice-container">
				<view class="notice-scroll">
					<view 
						class="notice-item" 
						v-for="(item, index) in noticeList" 
						:key="index"
						@click="viewNoticeDetail(item)"
					>
						<view class="notice-dot" :class="{ 'new-dot': item.isNew }"></view>
						<text class="notice-title">{{ item.title }}</text>
						<text class="notice-time">{{ item.time }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 园区服务 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">园区服务</text>
				<text class="section-more" @click="viewMore('service')">更多 ></text>
			</view>
			<view class="service-grid">
				<view class="service-item" @click="navigateTo('water')">
					<image class="service-icon" src="/static/icons/送水服务.png"></image>
					<text class="service-text">送水服务</text>
				</view>
				<view class="service-item" @click="navigateTo('clean')">
					<image class="service-icon" src="/static/icons/保洁服务.png"></image>
					<text class="service-text">保洁服务</text>
				</view>
				<view class="service-item" @click="navigateTo('renovation')">
					<image class="service-icon" src="/static/icons/装修备案.png"></image>
					<text class="service-text">装修备案</text>
				</view>
				<view class="service-item" @click="navigateTo('house')">
					<image class="service-icon" src="/static/icons/房源查询.png"></image>
					<text class="service-text">房源查询</text>
				</view>
				<view class="service-item" @click="navigateTo('face')">
					<image class="service-icon" src="/static/icons/人脸录入.png"></image>
					<text class="service-text">人脸录入</text>
				</view>
				<view class="service-item" @click="navigateTo('car')">
					<image class="service-icon" src="/static/icons/车辆绑定.png"></image>
					<text class="service-text">车辆绑定</text>
				</view>
				<view class="service-item" @click="navigateTo('feedback')">
					<image class="service-icon" src="/static/icons/问题反馈.png"></image>
					<text class="service-text">问题反馈</text>
				</view>
				<view class="service-item" @click="navigateTo('more')">
					<image class="service-icon" src="/static/icons/更多服务.png"></image>
					<text class="service-text">更多服务</text>
				</view>
			</view>
		</view>
		
		<!-- 园区资讯 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">园区资讯</text>
				<text class="section-more" @click="viewMore('news')">更多 ></text>
			</view>
			<view class="news-list">
				<view 
					class="news-item" 
					v-for="(item, index) in newsList" 
					:key="index"
					@click="viewNewsDetail(item)"
				>
									<image class="news-image" :src="item.image" mode="aspectFill"></image>

					<view class="news-info">
						<text class="news-title">{{ item.title }}</text>
						<text class="news-desc">{{ item.desc }}</text>
						<view class="news-meta">
							<text class="news-time">{{ item.time }}</text>
							<text class="news-views">{{ item.views }}阅读</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				unreadMessages: 3,
				bannerList: [
					{ 
						id: 1, 
						image: '/static/tabbar/194.png', 
						title: '智慧科技产业园', 
						type: 'techpark',
						description: '智慧科技产业园位于城市CBD核心区，是一座集科技创新、企业孵化、人才培养于一体的现代化综合产业园区。'
					},
					{ 
						id: 2, 
						image: '/static/tabbar/park1.png', 
						title: '创新创业基地', 
						type: 'innovation',
						description: '创新创业基地为初创企业提供全方位的孵化服务，包括创业培训、投融资对接、市场推广等一站式服务。'
					},
					{ 
						id: 3, 
						image: '/static/tabbar/智慧园区1.jpg', 
						title: '研发中心', 
						type: 'research',
						description: '研发中心拥有先进的研发设备和实验室，致力于促进产学研结合，推动科技成果转化。'
					}
				],
				noticeList: [
					{ id: 1, title: '关于园区停车场管理系统升级的通知', time: '06-28', isNew: true },
					{ id: 2, title: '园区7月份物业费缴纳通知', time: '06-25', isNew: true },
					{ id: 3, title: '园区绿化养护工作通知', time: '06-20', isNew: false }
				],
				newsList: [
					{
						id: 1,
						title: '智慧园区建设成果展示',
						desc: '科技赋能产业升级，打造智慧园区新标杆',
						image: '/static/news1.png',
						time: '06-26',
						views: 328
					},
					{
						id: 2,
						title: '园区举办首届创新创业大赛',
						desc: '助力企业发展，促进产业集聚',
						image: '/static/news2.jpg',
						time: '06-22',
						views: 156
					}
				]
			}
		},
		onLoad() {
			// 获取登录用户信息
			this.getUserInfo()
		},
		onShow() {
			// 每次显示页面时刷新用户信息
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
				}
			},
			
			// 查看消息
			viewMessages() {
				uni.showToast({
					title: '消息中心功能开发中',
					icon: 'none'
				})
			},
			
			// 查看轮播图详情
			viewBannerDetail(item) {
				uni.navigateTo({
					url: `/pages/park-info/detail?id=${item.id}&title=${encodeURIComponent(item.title)}`
				})
			},
			
			// 导航到功能页面
			navigateTo(type) {
				// 添加调试信息，查看是否触发点击事件
				console.log('navigateTo被调用，类型：', type)
				
				// 检查用户是否登录
				if (!this.userInfo) {
					console.log('用户未登录')
					uni.showModal({
						title: '登录提示',
						content: '请先登录后再使用此功能',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								this.goToLogin()
							}
						}
					})
					return
				}
				
				// 检查是否为游客模式
				if (this.userInfo && this.userInfo.userType === 'guest') {
					console.log('用户是游客模式')
					uni.showModal({
						title: '游客模式提示',
						content: '游客模式下无法使用此功能，请登录后再试',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								this.goToLogin()
							}
						}
					})
					return
				}
				
				// 根据类型导航到不同页面
				switch(type) {
					case 'visitor':
						uni.navigateTo({
							url: '/pages/appointment/list'
						})
						break
					case 'repair':
						uni.navigateTo({
							url: '/pages/services/repair/index'
						})
						break
					case 'bill':
						uni.navigateTo({
							url: '/pages/billing/list'
						})
						break
					case 'parking':
						uni.navigateTo({
							url: '/pages/parking/application-list'
						})
						break
					case 'water':
						uni.navigateTo({
							url: '/pages/services/water-delivery/index'
						})
						break
					case 'clean':
						uni.navigateTo({
							url: '/pages/services/cleaning/list'
						})
						break
					case 'renovation':
						uni.navigateTo({
							url: '/pages/services/decoration/list'
						})
						break
					case 'device':
						uni.navigateTo({
							url: '/pages/services/device-maintenance/list'
						})
						break
					case 'face':
						uni.showToast({
							title: '人脸录入功能开发中',
							icon: 'none'
						})
						break
					case 'house':
						uni.navigateTo({
							url: '/pages/services/housing/list'
						})
						break
					case 'entry':
						uni.showToast({
							title: '人员入驻功能开发中',
							icon: 'none'
						})
						break
					case 'car':
						uni.navigateTo({
							url: '/pages/parking/list'
						})
						break
					case 'feedback':
						uni.navigateTo({
							url: '/pages/feedback/index'
						})
						break
					case 'more':
						uni.showToast({
							title: '更多服务功能开发中',
							icon: 'none'
						})
						break
					default:
						break
				}
			},
			
			// 查看更多
			viewMore(type) {
				switch(type) {
					case 'notice':
						window.location.href = '#/pages/notice/notice';
						break
					case 'service':
						uni.navigateTo({
							url: '/pages/services/repair/index'
						})
						break
					case 'news':
						window.location.href = '#/pages/notice/notice';
						break
					default:
						break
				}
			},
			
			// 查看公告详情
			viewNoticeDetail(item) {
				uni.showToast({
					title: `公告${item.id}详情功能开发中`,
					icon: 'none'
				})
			},
			
			// 查看新闻详情
			viewNewsDetail(item) {
				uni.showToast({
					title: `新闻${item.id}详情功能开发中`,
					icon: 'none'
				})
			},
			
			// 跳转到登录页
			goToLogin() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.content {
		background: linear-gradient(135deg, 
			#f5f9ff 0%, 
			#eaf4ff 25%, 
			#e0f0ff 50%, 
			#e6f2ff 75%, 
			#f0f8ff 100%);
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	/* 顶部状态栏 */
	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		margin: 30rpx 30rpx 0;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	}
	
	.weather-info {
		font-size: 24rpx;
		color: #5A6A85;
		background-color: rgba(255, 255, 255, 0.5);
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		letter-spacing: 1rpx;
	}
	
	.park-name {
		font-size: 34rpx;
		font-weight: 600;
		color: #2c3e50;
		letter-spacing: 1rpx;
	}
	
	.message-icon {
		position: relative;
		font-size: 40rpx;
		width: 76rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 38rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
		transition: all 0.3s;
	}
	
	.message-icon:active {
		transform: scale(0.95);
		background-color: rgba(255, 255, 255, 0.9);
	}
	
	.badge {
		position: absolute;
		top: -4rpx;
		right: -4rpx;
		background-color: #FF3B30;
		color: #FFFFFF;
		font-size: 20rpx;
		min-width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 8rpx;
		box-shadow: 0 2rpx 6rpx rgba(255, 59, 48, 0.3);
		font-weight: 500;
	}

	/* 轮播图 */
	.banner-swiper {
		width: calc(100% - 60rpx);
		height: 340rpx;
		margin: 30rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
	}

	/* 游客模式提示 */
	.guest-tip {
		margin: 30rpx;
		background: linear-gradient(to right, rgba(255, 239, 186, 0.7), rgba(255, 255, 255, 0.7));
		padding: 24rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.08);
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
	}
	
	.guest-tip-text {
		font-size: 26rpx;
		color: #F57C00;
		font-weight: 500;
	}
	
	.guest-login-btn {
		background: linear-gradient(to right, #FF9800, #F57C00);
		color: white;
		font-size: 24rpx;
		padding: 0 24rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		margin: 0;
		box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.15);
		transition: all 0.3s;
	}
	
	.guest-login-btn:active {
		opacity: 0.85;
		transform: scale(0.98);
	}

	/* 快捷功能区 */
	.quick-function {
		display: flex;
		justify-content: space-around;
		background-color: rgba(255, 255, 255, 0.7);
		padding: 36rpx 20rpx;
		margin: 30rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}
	
	.function-item, .service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s;
	}
	
	.function-item:active, .service-item:active {
		transform: scale(0.95);
	}
	
	.function-icon, .service-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 16rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 26rpx;
		padding: 20rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
	}
	
	.function-text, .service-text {
		font-size: 26rpx;
		color: #2c3e50;
		font-weight: 500;
	}

	/* 通用区块样式 */
	.section {
		background-color: rgba(255, 255, 255, 0.7);
		margin: 30rpx;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		position: relative;
		padding-left: 20rpx;
	}
	
	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(to bottom, #007AFF, #5AC8FA);
		border-radius: 4rpx;
	}
	
	.section-more {
		font-size: 24rpx;
		color: #007AFF;
		background-color: rgba(0, 122, 255, 0.1);
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		transition: all 0.3s;
	}
	
	.section-more:active {
		background-color: rgba(0, 122, 255, 0.2);
		transform: scale(0.98);
	}

	/* 公告样式 */
	.notice-container {
		max-height: 240rpx;
		overflow: hidden;
	}
	
	.notice-scroll {
		height: 100%;
	}
	
	.notice-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		border-radius: 16rpx;
		margin-bottom: 12rpx;
		background-color: rgba(255, 255, 255, 0.5);
		transition: all 0.3s;
	}
	
	.notice-item:active {
		background-color: rgba(255, 255, 255, 0.9);
		transform: scale(0.99);
	}
	
	.notice-dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #CCCCCC;
		border-radius: 6rpx;
		margin-right: 20rpx;
	}
	
	.new-dot {
		background-color: #FF3B30;
		box-shadow: 0 0 8rpx rgba(255, 59, 48, 0.5);
	}
	
	.notice-title {
		flex: 1;
		font-size: 28rpx;
		color: #2c3e50;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.notice-time {
		font-size: 24rpx;
		color: #5A6A85;
		margin-left: 20rpx;
		background-color: rgba(0, 0, 0, 0.03);
		padding: 4rpx 12rpx;
		border-radius: 10rpx;
	}

	/* 服务网格 */
	.service-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}
	
	.service-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
		transition: all 0.3s;
	}

	/* 新闻列表 */
	.news-list {
		display: flex;
		flex-direction: column;
	}
	
	.news-item {
		display: flex;
		padding: 24rpx 20rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		background-color: rgba(255, 255, 255, 0.5);
		transition: all 0.3s;
	}
	
	.news-item:active {
		background-color: rgba(255, 255, 255, 0.9);
		transform: scale(0.99);
	}
	
	.news-image {
		width: 200rpx;
		height: 130rpx;
		border-radius: 16rpx;
		margin-right: 24rpx;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.08);
		object-fit: cover;
	}
	
	.news-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.news-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 12rpx;
	}
	
	.news-desc {
		font-size: 26rpx;
		color: #5A6A85;
		margin-bottom: 16rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.news-meta {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		color: #8395A7;
		background-color: rgba(0, 0, 0, 0.03);
		padding: 6rpx 16rpx;
		border-radius: 12rpx;
	}
</style>
